<template>
    <div class="main-layout main-container">
        <SideBar></SideBar>
        <div class="main-content">
            <Header></Header>
            <div class="main-content-main">
                <RouterView v-slot="{ Component }">
                    <KeepAlive :include="includesRoutes">
                        <component :is="Component"></component>
                    </KeepAlive>
                </RouterView>
            </div>
        </div>
    </div>
</template>
<script setup>
import { computed } from 'vue';
import SideBar from './sidebar/index.vue'
import Header from './header/index.vue'
import { useActiveRouterStore } from '@/stores/router.js'
const activeRoutesStore = useActiveRouterStore()
const includesRoutes = computed(() => {
    //实际需要的是组件内显示声明的name  而不是路由的name，所以这里一定要路由的name和组件内的name对应
    return activeRoutesStore.activeRoutes.map(i => i.name)
})

</script>

<style scoped lang="scss">
.main-layout {
    display: flex;

    .main-content {
        flex-grow: 1; //是否进行拉伸填满剩余空间   1是
        flex-shrink: 0; //是否可以进行压缩  0否
        flex-basis: auto; //初始化的大小  auto 默认
        display: flex;
        flex-direction: column;

        .main-content-main {
            flex: 1;
            overflow-y: auto;
            /* 允许垂直滚动 */
        }
    }
}
</style>